<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body{
        padding: 0;
        margin: 0;
    }
    h1{
        text-align: center;
    }
    textarea{
        margin-left: 10%;
        width: 80%;
        resize: none;
        border-right: none;
        border-left: none;
    }
    h3{
        margin-left: 10%;
    }
    .btn-on{
    width: 60px;
    height: 25px;
    margin: 0 3px;
    border-radius: 25px;
    font-size: 14px;
  }
  div{
    display: flex;
  }
  .btn-on{
    margin-top: 20px;
    cursor: pointer;
    position: relative;
    border: 1px solid white;
    background-color: #12B090;
  }
  .btn-on-circle{
    position: absolute;
    width: 15px;
    height: 15px;
    top: 5px;
    left: 5px;
    background-color: rgb(255, 255, 255);
    border-radius: 50%;
    box-shadow: 0 0 10px white;
    transition: all .5s;
  }
  .btn-on-text{
    position: absolute;
    right: 10px;
    line-height: 25px;
    color: white;
    transition: all .5s;
  }
  input{
    margin-left: 10%;
    border: 1px solid #aaa;
    border-left: none;

  }
  button{
    position: fixed;
    bottom: 10%;
    width: 40%;
    left: 30%;
    height: 50px;
    color: #fff;
    background-color: gray;
    border: none;
    border-radius: 6%;
  }
</style>
<body>
    <span style="height: 60px;">
        <h1>管理系统通知</h1>
    </span>
    <h3>发布通知</h3>
    <textarea name="" id="" cols="30" rows="10" placeholder="通知内容如下..."></textarea>
    <div>
        <h3>定时发布</h3>
        <p class="btn-on" onclick="on_off()">
            <span class="btn-on-circle"></span>
            <span class="btn-on-text">ON</span>
        </p>
    </div>
    <input type="datetime-local" name="" id="">
    <button>提交</button>
</body>
<script>
    function on_off(type){
      var btn = document.getElementsByClassName("btn-on")[0];
      var circle = document.getElementsByClassName("btn-on-circle")[0];
      var text = document.getElementsByClassName("btn-on-text")[0];
  
      if(!type){
        btn.style= "background-color: #ccc;"
        circle.style="left: 40px;background-color: #888;box-shadow: 0 0 10px #888;";
        text.style="right: 30px;color: #888;";
        text.innerText="OFF";
      } else {
        btn.style= ""
        circle.style="";
        text.style="";
        text.innerText="ON";
      }
      btn.setAttribute("onclick", "on_off(" + !type + ")");
    }
    on_off(false)// 关闭按钮
  </script>
</html>